import type {Directive, VNode} from "vue"

const vRipple: Directive<
    HTMLElement,
    {
        duration?: number
        backgroundColor?: string
    }
> = {
    mounted(el, binding, vnode:VNode, prevVnode) {
        let { position, overflow } = getComputedStyle(el)
        if (position == "static") {
            el.style.position = "relative"
        }
        if (overflow !== "hidden") {
            el.style.overflow = "hidden"
        }

        el.addEventListener("click", function doRipple(ev: MouseEvent) {
            let span = document.createElement("span")
            let size = Math.max(el.offsetWidth, el.offsetHeight) * 2
            let duration = (binding.value?.duration ?? 500) / 1000
            let backgroundColor = binding.value?.backgroundColor ?? "rgba(0, 0, 0, .15)"
            let { x, y } = el.getBoundingClientRect()
            let { clientX, clientY } = ev

            span.style.width = size + "px"
            span.style.height = size + "px"
            span.style.position = "absolute"
            span.style.backgroundColor = backgroundColor
            span.style.top = clientY - y - size / 2 + "px"
            span.style.left = clientX - x - size / 2 + "px"
            span.style.transform = "scale(0)"
            span.style.transition = `transform ${duration}s ease-in, opacity ${duration}s ease-in`
            span.style.borderRadius = "50%"
            span.style.pointerEvents = "none"

            el.appendChild(span)

            span.addEventListener("transitionend", function (e: TransitionEvent) {
                span.parentElement?.removeChild(this)
            })

            requestAnimationFrame(() => {
                span.style.transform = "scale(1)"
                span.style.opacity = "0"
            })
        })
    }
}

export default vRipple
